import React, { useEffect, useState,useRef } from 'react';
import '../assets/css/administrator.css';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

import {
  Button,
  Form,
  Input,
  Radio,
  Upload,
  message
} from 'antd';
const getBase64 = (img: RcFile, callback: (url: string) => void) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
};

const beforeUpload = (file: RcFile) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};
const Staffsadd: React.FC = (props: any) => {
  // console.log(props);
  const [form] = Form.useForm();
  // 确认
  const onFinish = (values: any) => {
    console.log(values);
  };
  // 取消
  const onReset = () => {
    form.resetFields();
  };
  // 男女
  const [value, setValue] = useState(1);
  const onChange = (e: any) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  // 头像上传
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();

  const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj as RcFile, url => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
    </div>
  );

  useEffect(() => {
  }, []);

  return (
    <div id="administratoradd">
      <h2>添加职员</h2>
      <Form
        form={form}
        onFinish={onFinish}
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 5 }}
      >
        <Form.Item name="note" label="照片" rules={[{ required: true }]}>
          <Upload
            name="avatar"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            beforeUpload={beforeUpload}
            onChange={handleChange}
          >
            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
          </Upload>
        </Form.Item>
        <Form.Item name="note" label="姓名" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="note" label="身份证号" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="note" label="联系电话" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="note" label="管辖范围">
          <Input />
        </Form.Item>
        <Form.Item name="note" label="职员类型" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="note" label="性别">
          <Radio.Group onChange={onChange} value={value}>
            <Radio value={1}>男</Radio>
            <Radio value={2}>女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item style={{marginLeft:'10%'}}>
          <Button type="primary" htmlType="submit">
            确认
          </Button>
          <Button htmlType="button" onClick={onReset}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Staffsadd;
